<template>
	<view>
		<navBar title="我的博客"></navBar>
		<view v-if="myBlogs.length === 0" class="unData">
			<u-empty mode="data" text='暂无博客' icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</view>
		<view v-else class="mayblog">
			<view class="blogMain" v-for="blog in myBlogs" :key="blog.id" @click="jump(blog)">
				<cover-image class="img" :src="blog.cover"></cover-image>
				<view class="blogText">
					<text class="title">{{blog.title}}</text>
					<view v-if="blog.BlogClassifies.length ===1" class="classif">
						<u-tag :text="blog.BlogClassifies[0].classifyName" plain size="mini" type="warning"></u-tag>
					</view>
					<view class="classif" v-else>
						<u-tag v-for="test in  blog.BlogClassifies" :key="test.classifyId" :text="test.classifyName"
							plain size="mini" type="warning"></u-tag>
					</view>
					<view class="icon">
						<u-icon color="#F5C668" name="thumb-up"></u-icon>{{blog.like_count}}
						<u-icon color="#F5C668" name="more-circle"></u-icon>{{blog.comment_count}}
						<u-icon color="#F5C668" name="eye"></u-icon>{{blog.read_count}}
					</view>
					<text>{{timeFormatSeconds(blog.createdAt) +"发布"}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myBlog
	} from '@/config/api.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				myBlogs: [],
			}
		},
		onLoad() {
			this.initmyBlog()
		},
		methods: {
			async initmyBlog() {
				const myBlogs = await myBlog(10, 0, this.userInfo.token)
				this.myBlogs = myBlogs.data.rows
				console.log(this.myBlogs,myBlogs);

			},
			timeFormatSeconds(time) {
				var d = time ? new Date(time) : new Date();
				var year = d.getFullYear();
				var month = d.getMonth() + 1;
				var day = d.getDate();
				var hours = d.getHours();
				var min = d.getMinutes();
				var seconds = d.getSeconds();

				if (month < 10) month = '0' + month;
				if (day < 10) day = '0' + day;
				if (hours < 0) hours = '0' + hours;
				if (min < 10) min = '0' + min;
				if (seconds < 10) seconds = '0' + seconds;

				return (year + '年' + month + '月' + day + '日' + hours + ':' + min + ':' + seconds);

			},
			jump(blog){
				console.log(blog.id);
				uni.navigateTo({
					url: `/pages/blogDetails/blogDetails?id=${blog.id}`
				});
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.mayblog {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-color: #ececec;
		padding: 2vh 2vw 0 2vw;


		.blogMain {

			width: 100%;
			height: 20vh;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
			background-color: #ffffff;
			padding: 2vw;
			box-sizing: border-box;
			// border: 1px solid black;
			display: flex;
			align-items: center;

			.img {
				border: 1px solid #ececec;
				width: 30vw;
				height: 17vh;
			}

			.blogText {
				height: 100%;
				margin-left: 2vw;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					font-size: 6vw;
				}

				.classif {
					display: flex;

					::v-deep .u-tag-wrapper {
						margin-right: 1vw;
					}
				}
			}

			.icon {
				display: flex;

				::v-deep .u-icon {
					margin: 0 1vw;
				}
			}
		}
	}

	.unData {
		padding-top: 8vh;
		width: 100vw;
		height: 100wh;

		::v-deep .u-empty__text {
			font-size: 18px !important;
		}

		::v-deep uni-image {
			width: 80% !important;
		}
	}
</style>
